import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const LayoutContainerMeta: IPublicTypeComponentMetadata = {
  componentName: 'LayoutContainer',
  title: '布局容器',
  category: '布局',
  group: '公共组件',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'LayoutContainer',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'string',
      description: '容器宽度'
    },
    {
      name: 'height',
      propType: 'string',
      description: '容器高度'
    },
    {
      name: 'layoutType',
      propType: 'string',
      description: '布局类型'
    },
    {
      name: 'backgroundColor',
      propType: 'string',
      description: '背景颜色'
    },
    {
      name: 'backgroundImage',
      propType: 'string',
      description: '背景图片'
    },
    {
      name: 'padding',
      propType: 'number',
      description: '内边距'
    },
    {
      name: 'gap',
      propType: 'number',
      description: '间距'
    },
    {
      name: 'items',
      propType: 'array',
      description: '布局项目列表'
    },
    {
      name: 'gridColumns',
      propType: 'number',
      description: '网格列数'
    },
    {
      name: 'gridRows',
      propType: 'number',
      description: '网格行数'
    },
    {
      name: 'flexDirection',
      propType: 'string',
      description: 'Flex方向'
    },
    {
      name: 'justifyContent',
      propType: 'string',
      description: '主轴对齐'
    },
    {
      name: 'alignItems',
      propType: 'string',
      description: '交叉轴对齐'
    },
    {
      name: 'allowDrag',
      propType: 'bool',
      description: '允许拖拽'
    },
    {
      name: 'allowResize',
      propType: 'bool',
      description: '允许调整大小'
    },
    {
      name: 'showGrid',
      propType: 'bool',
      description: '显示网格'
    },
    {
      name: 'gridSize',
      propType: 'number',
      description: '网格大小'
    },
    {
      name: 'snapToGrid',
      propType: 'bool',
      description: '对齐网格'
    },
    {
      name: 'responsive',
      propType: 'bool',
      description: '响应式布局'
    },
    {
      name: 'theme',
      propType: 'string',
      description: '主题'
    },
    {
      name: 'onItemMove',
      propType: 'func',
      description: '项目移动事件'
    },
    {
      name: 'onItemResize',
      propType: 'func',
      description: '项目大小调整事件'
    },
    {
      name: 'onItemSelect',
      propType: 'func',
      description: '项目选择事件'
    },
    {
      name: 'onLayoutChange',
      propType: 'func',
      description: '布局变化事件'
    },
    {
      name: 'onClick',
      propType: 'func',
      description: '点击事件'
    }
  ],
  configure: {
    props: [
      {
        name: 'layoutType',
        title: { label: { type: 'i18n', 'en-US': 'layoutType', 'zh-CN': '布局类型' } },
        setter: { 
          componentName: 'SelectSetter', 
          isRequired: false, 
          initialValue: 'absolute',
          props: {
            options: [
              { title: '绝对定位', value: 'absolute' },
              { title: '网格布局', value: 'grid' },
              { title: '弹性布局', value: 'flex' },
              { title: '瀑布流', value: 'masonry' }
            ]
          }
        }
      },
      {
        name: 'width',
        title: { label: { type: 'i18n', 'en-US': 'width', 'zh-CN': '容器宽度' } },
        setter: { componentName: 'StringSetter', isRequired: false, initialValue: '100%' }
      },
      {
        name: 'height',
        title: { label: { type: 'i18n', 'en-US': 'height', 'zh-CN': '容器高度' } },
        setter: { componentName: 'StringSetter', isRequired: false, initialValue: '600px' }
      },
      {
        name: 'backgroundColor',
        title: { label: { type: 'i18n', 'en-US': 'backgroundColor', 'zh-CN': '背景颜色' } },
        setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'transparent' }
      },
      {
        name: 'backgroundImage',
        title: { label: { type: 'i18n', 'en-US': 'backgroundImage', 'zh-CN': '背景图片' } },
        setter: { componentName: 'StringSetter', isRequired: false }
      },
      {
        name: 'padding',
        title: { label: { type: 'i18n', 'en-US': 'padding', 'zh-CN': '内边距' } },
        setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 16 }
      },
      {
        name: 'gap',
        title: { label: { type: 'i18n', 'en-US': 'gap', 'zh-CN': '项目间距' } },
        setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 8 }
      },
      {
        name: 'gridColumns',
        title: { label: { type: 'i18n', 'en-US': 'gridColumns', 'zh-CN': '网格列数' } },
        setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 3 }
      },
      {
        name: 'flexDirection',
        title: { label: { type: 'i18n', 'en-US': 'flexDirection', 'zh-CN': 'Flex方向' } },
        setter: { 
          componentName: 'SelectSetter', 
          isRequired: false, 
          initialValue: 'row',
          props: {
            options: [
              { title: '水平', value: 'row' },
              { title: '垂直', value: 'column' },
              { title: '水平反向', value: 'row-reverse' },
              { title: '垂直反向', value: 'column-reverse' }
            ]
          }
        }
      },
      {
        name: 'justifyContent',
        title: { label: { type: 'i18n', 'en-US': 'justifyContent', 'zh-CN': '主轴对齐' } },
        setter: { 
          componentName: 'SelectSetter', 
          isRequired: false, 
          initialValue: 'flex-start',
          props: {
            options: [
              { title: '开始', value: 'flex-start' },
              { title: '结束', value: 'flex-end' },
              { title: '居中', value: 'center' },
              { title: '两端对齐', value: 'space-between' },
              { title: '环绕', value: 'space-around' },
              { title: '平均分布', value: 'space-evenly' }
            ]
          }
        }
      },
      {
        name: 'alignItems',
        title: { label: { type: 'i18n', 'en-US': 'alignItems', 'zh-CN': '交叉轴对齐' } },
        setter: { 
          componentName: 'SelectSetter', 
          isRequired: false, 
          initialValue: 'flex-start',
          props: {
            options: [
              { title: '开始', value: 'flex-start' },
              { title: '结束', value: 'flex-end' },
              { title: '居中', value: 'center' },
              { title: '拉伸', value: 'stretch' },
              { title: '基线', value: 'baseline' }
            ]
          }
        }
      },
      {
        name: 'allowDrag',
        title: { label: { type: 'i18n', 'en-US': 'allowDrag', 'zh-CN': '允许拖拽' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false }
      },
      {
        name: 'allowResize',
        title: { label: { type: 'i18n', 'en-US': 'allowResize', 'zh-CN': '允许调整大小' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false }
      },
      {
        name: 'showGrid',
        title: { label: { type: 'i18n', 'en-US': 'showGrid', 'zh-CN': '显示网格' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false }
      },
      {
        name: 'gridSize',
        title: { label: { type: 'i18n', 'en-US': 'gridSize', 'zh-CN': '网格大小' } },
        setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 10 }
      },
      {
        name: 'snapToGrid',
        title: { label: { type: 'i18n', 'en-US': 'snapToGrid', 'zh-CN': '对齐网格' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: false }
      },
      {
        name: 'allowDrop',
        title: { label: { type: 'i18n', 'en-US': 'allowDrop', 'zh-CN': '允许放置组件' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
      },
      {
        name: 'acceptTypes',
        title: { label: { type: 'i18n', 'en-US': 'acceptTypes', 'zh-CN': '接受的组件类型' } },
        setter: { componentName: 'JsonSetter', isRequired: false }
      },
      {
        name: 'responsive',
        title: { label: { type: 'i18n', 'en-US': 'responsive', 'zh-CN': '响应式布局' } },
        setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
      },
      {
        name: 'items',
        title: { label: { type: 'i18n', 'en-US': 'items', 'zh-CN': '布局项目' } },
        setter: { componentName: 'JsonSetter', isRequired: false }
      }
    ],
    supports: {
      style: true
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '布局容器 - 绝对定位',
    screenshot: '',
    schema: {
      componentName: 'LayoutContainer',
      props: {
        width: '100%',
        height: '600px',
        layoutType: 'absolute',
        backgroundColor: 'transparent',
        padding: 16,
        gap: 8,
        allowDrag: false,
        allowResize: false,
        allowDrop: true,
        showGrid: false,
        gridSize: 10,
        snapToGrid: false,
        responsive: true,
        theme: 'dark',
        items: [
          {
            id: 'item1',
            component: '示例组件1',
            x: 20,
            y: 20,
            width: 200,
            height: 100,
            zIndex: 1,
            visible: true
          },
          {
            id: 'item2',
            component: '示例组件2',
            x: 240,
            y: 20,
            width: 200,
            height: 100,
            zIndex: 1,
            visible: true
          },
          {
            id: 'item3',
            component: '示例组件3',
            x: 20,
            y: 140,
            width: 420,
            height: 80,
            zIndex: 1,
            visible: true
          }
        ]
      }
    }
  },
  {
    title: '布局容器 - 网格布局',
    screenshot: '',
    schema: {
      componentName: 'LayoutContainer',
      props: {
        width: '100%',
        height: '400px',
        layoutType: 'grid',
        backgroundColor: 'transparent',
        padding: 16,
        gap: 16,
        gridColumns: 3,
        gridRows: 'auto',
        responsive: true,
        theme: 'dark',
        items: [
          {
            id: 'grid1',
            component: '网格组件1',
            visible: true
          },
          {
            id: 'grid2',
            component: '网格组件2',
            visible: true
          },
          {
            id: 'grid3',
            component: '网格组件3',
            visible: true
          },
          {
            id: 'grid4',
            component: '网格组件4',
            visible: true
          },
          {
            id: 'grid5',
            component: '网格组件5',
            visible: true
          },
          {
            id: 'grid6',
            component: '网格组件6',
            visible: true
          }
        ]
      }
    }
  },
  {
    title: '布局容器 - 弹性布局',
    screenshot: '',
    schema: {
      componentName: 'LayoutContainer',
      props: {
        width: '100%',
        height: '300px',
        layoutType: 'flex',
        backgroundColor: 'transparent',
        padding: 16,
        gap: 12,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexWrap: 'wrap',
        responsive: true,
        theme: 'dark',
        items: [
          {
            id: 'flex1',
            component: 'Flex组件1',
            visible: true
          },
          {
            id: 'flex2',
            component: 'Flex组件2',
            visible: true
          },
          {
            id: 'flex3',
            component: 'Flex组件3',
            visible: true
          }
        ]
      }
    }
  }
];

export default {
  ...LayoutContainerMeta,
  snippets
}; 